<template>
    <a-form ref="formRef" layout="vertical" :model="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }" autocomplete="off">
        <a-form-item label="风格设置" :rules="rules.style" name="style" class="style">
            <img class="check-img" :src="Dart" alt="dark" @click="onStyleChange('dark')" />
            <img class="check-img" :src="Highlight" alt="Highlight" @click="onStyleChange('highlight')" />
            <check-outlined :class="checkStyle" />
        </a-form-item>
        <a-form-item label="多页签模式" :rules="rules.tab" name="tab">
            <Switch v-model:checked="form.tab" @change="onTabChange" />
        </a-form-item>
    </a-form>
</template>
<script setup>
import { ref, reactive, computed } from 'vue'
import { CheckOutlined } from '@ant-design/icons-vue'
import Dart from '/@/assets/svg/dart.svg'
import Highlight from '/@/assets/svg/highlight.svg'
import { Switch } from '@iframe/tools/components'
import { useFormatStore } from '@iframe/tools/store/modules/format'

const formatStore = useFormatStore()
const formRef = ref()

const checkStyle = computed(() => {
    return `check ${form.style}`
})

const form = reactive({
    style: formatStore.getStyle,
    tab: formatStore.getTab
})

const rules = reactive({
    style: { required: true, message: '请选择风格' },
    tab: { required: true, message: '请选择多页签模式' }
})

const onStyleChange = style => {
    form.style = style
    formatStore.setStyle(style)
}
const onTabChange = tab => {
    formatStore.setTab(tab)
}
</script>
<style lang="less" scoped>
.style {
    position: relative;
    .check-img {
        width: 48px;
        margin: 0 10px;
        cursor: pointer;
    }
    .check {
        position: absolute;
        color: #1890ff;
        bottom: 10px;
    }
    .dark {
        left: 35px;
    }
    .highlight {
        left: 105px;
    }
}
</style>
